<template>
	<!-- 海报 wwl -->
	<page ref='page'>
		<view class="page">
			<!-- <view class="tab_row">
				<tabRow :list='tabList' @change='changeTab' ref='tabRow' />
			</view> -->
			
			<view class="dianjifenx">
				
				<view class="text">
					点击分享给要邀请的人，自动成为你当前默认业主认证的小区的人
				</view>
				<view class="anniu" v-if="house_record != 0">
					<button open-type="share" :plain="true" class="ann">点击分享</button>
					<uqrcode ref="uQRCode" id="fenxiao1" mode="view" :text="'/pages/index/index?residentialquarters_id='+residentialquarters_id+'&residentialquarters_name='+residentialquarters_name" size="300" margin="20" backgroundColor="#3f5266" foregroundColor="#41b782" />
					<button @click="save">保存二维码</button>
				</view>
				<view class="anniu" v-if="house_record == 0">
					<view class="aa">您没有进行业主认证，无法分享</view>
					
				</view>
			</view>
			
			
			
			<!-- <view class="tab_row">
				<tabRow2  ref='tabRow' :tabList='tabList'  @change='changeTab' />
			</view>
			<swiper class="tab_data_box" :current='tabIndex' :duration="300" @change="onswiperchange">
				<swiper-item class="tab_data_row" v-for="(item, index) in tabList" :key="index">
					<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
						<view class="list_box">
							<view class="list" v-if='list && list.length > 0' :style="{height:heightList && Math.max(...heightList) != 0 ? Math.max(...heightList) + 'rpx' :'200rpx'}">
								<view class="row" v-for="(item,index) in list"
								:id="`row_${item.id}`"
								:style='{top:item.style ? item.style.top : "1000px",left:item.style ? item.style.left : "1000px"}'
								 :key='index' @click="onDetail(item.id,item.picture)">
								  <image :src="item.picture" mode="widthFix" class="image" :style='{height:item.height ? (item.height * 326 /item.width)+"rpx" : ""}'></image>
								</view>
							</view>
							<empty v-else />
						</view>
					</scroll-view>
				  </swiper-item>
			</swiper> -->
		</view>
	</page>
</template>

<script>
	import {getMyPosterNav , getMyPoster, getStatistics} from './static/api.js'
	import tabRow from '@/components/tab-row.vue'
	import tabRow2 from '@/components/tab-row2.vue'
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	export default {
		components: {
			tabRow,
			tabRow2
		},
		data() {
			return {
				tabList: [],
				tabActive: null,
				tabIndex: 0,
				list: [],
				pageNumber: 1,
				total: 0,
				size: 12,
				loading:false,
				listLoading:false,
				heightList: [0, 0],
				residentialquarters_id:0,
				residentialquarters_name:'默认小区',
				house_record:0,
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '邀请入驻'+this.residentialquarters_name,
		      path: '/pages/index/index?residentialquarters_id='+this.residentialquarters_id+'&residentialquarters_name='+this.residentialquarters_name,
			  mpId:'wxe67b4ac44d869605'
		    }
		},
		methods: {
			//保存二维码
			save() {
			  this.$refs.uQRCode.save({
			    success: res => {
			      console.log(res)
			    }
			  })
			},
			//从新获取用户信息
			async getInfoUser() {
				try {
					var result = await getUserInfo()
					
					this.$store.commit('setUser', result)
					// uni.setStorageSync('TZ_userInfo', result)
					var result2 = await getStatistics()
					console.log(result,'用户信息分享');
					
					this.house_record = result.house_record;
					// const msg = '{"code":"102","name":"'+result.name+'","user_id":"'+result.id+'"}';
					this.residentialquarters_id = result.residentialquarters_id;
					this.residentialquarters_name = result.residentialquarters_name;
					
				} catch (err) {
				}
			},
			onswiperchange(e) {
				if(this.loading) return 
				let index = e.target.current || e.detail.current
				this.switchTab(this.tabList[index].id)
			},
			switchTab(x){
				var index = this.tabList.findIndex(c=>c.id == x)
				if(index == this.tabIndex) return 
				this.tabIndex = index
				this.tabActive = x
				this.$refs.tabRow.active = x
				this.pageNumber = 1
				this.total = 0
				this.list = []
				this.heightList = [0, 0]
				this.getList()
			
			},
			loadMore(){
				if( this.pageNumber * this.size >= this.total ||  this.listLoading) return
				this.pageNumber ++ 
				this.getList()
			},
			changeTab(x) {
				this.tabActive = x
				this.switchTab(x)
			},
			onDetail(id,img) {
				uni.navigateTo({
					url: '/pagesMy/postersShare?id=' + id + '&img=' + encodeURIComponent(img)
				})
			},
			async getTab() {
				uni.showLoading()
					var res = await getMyPosterNav()
					uni.hideLoading()
					res.forEach(e=>{
					e.idc = e.id
					e.id = 'tab' + e.id
				})
				this.tabList = [{id:'tab0' ,idc : '', sort: 1, name: "全部"},...res]
				if (this.tabList.length > 0){
					this.tabActive = this.tabList[0].id
					this.getList()
				} 
			},
			async getList() {
				if(this.pageNumber == 1) uni.showLoading()
				this.listLoading = true
				var res = await getMyPoster({nav_id:this.tabList[this.tabIndex].idc,page:this.pageNumber,limit:this.size})
				this.total = res.count
				if (this.pageNumber == 1) {
					this.list =  res.list 
					setTimeout(() => {
						this.getDomArea(0)
						this.listLoading = false
					}, 500);
				} else {
					this.list = [...this.list, ...res.list]
					setTimeout(() => {
						this.getDomArea( this.pageNumber *  this.size - this.size)
						this.listLoading = false
					}, 500);
				}
				
				if(this.pageNumber == 1) uni.hideLoading()
			},
			getDomArea(i) {
				if(this.list.length == i) return
				if (!this.list[i].style) this.list[i].style = {}
				let x = Math.min(...this.heightList)
				let y = this.heightList.indexOf(x)
				this.list[i].style.top = x + 'rpx'
				this.list[i].style.left = y  == 0 ? '0rpx' :  '348rpx'
				const query = uni.createSelectorQuery().in(this);
				this.heightList[y] =x + Number( this.list[i].height  * 326 / this.list[i].width) + 20
				// console.log(i,this.heightList[y],this.list[i].style.top )
				if (i != this.list.length - 1) {
					this.getDomArea(i + 1)
				} else {
					this.$forceUpdate()
				}
				// query.select(`#row_${this.list[i].id}`).boundingClientRect(data => {
				// 	this.heightList[y] = x + Number((data.height * 326 / data.width).toFixed(2)) + 20
				// 	if (i != this.list.length - 1) {
				// 		this.getDomArea(i + 1)
				// 	} else {
				// 		this.$forceUpdate()
				// 	}
				// }).exec();
			},
		},
		onReady() {
			 // this.$refs.tabRow.active = 'tab0'
		},
		onLoad() {
			this.getInfoUser()
			// this.getTab()
		}

	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		// min-height: 100%;
		display: flex;
		background-color:#fff;
	}
	.page {
		background-color: #fff;
	    flex: 1;
		display: flex;
	    flex-direction: column;
	    overflow: hidden;
		// height: 100vh;
	  }
	  .tab_row{
		  padding: 40rpx 36rpx 24rpx;
	  }
	.tab_data_box{
		flex:1;
		.tab_data_row{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}
	.page_content {
		padding: 40rpx 36rpx 0;
		width: 100%;
		box-sizing: border-box;
	}
	// .list {
	// 	padding: 0 36rpx;
	// 	width: 100%;
	// 	box-sizing: border-box;
	// 	padding-top: 40rpx;
	// 	-moz-column-count: 2;
	// 	-webkit-column-count: 2;
	// 	column-count: 2;
	// 	-moz-column-gap: 1em;
	// 	-webkit-column-gap: 1em;
	// 	column-gap: 1em;
	// 	.row {
	// 		margin-top: 1em;
	// 		-moz-page-break-inside: avoid;
	// 		-webkit-column-break-inside: avoid;
	// 		break-inside: avoid;
	// 		.image {
	// 			width: 322rpx;
	// 			// height:%;
	// 			display: block;
	// 			margin-bottom: 40rpx;
	// 		}
	// 	}
	// }
	.list_box{
		padding: 0 36rpx;
		width: 100%;
		box-sizing: border-box;
		.list {
			width: 100%;
			position: relative;
			margin-top: 39rpx;
			.row {
				position: absolute;
				width: 326rpx;
				.image {
					width: 326rpx;
					height: 100%;
					display: block;
					margin-bottom: 40rpx;
				}
			}
		}
	
	
	}
	
	.dianjifenx{
		display: flex;
		    justify-content: center;
		    flex-direction: column;
		    align-items: center;
		    padding: 10px 10px;
			
		.text{
			padding: 10px 10px;
			    background: #9a1010;
			    color: #fff;
			    font-size: 20px;
			    border-radius: 10px;
		}
		
		.anniu{
			width: 100%;
			    display: flex;
			    justify-content: center;
			    flex-direction: column;
			    align-items: center;
			    padding: 13px 10px;
			    margin-top: 10px;
			    // background: #c77800;
			    color: #fff;
				
		}
		
		.ann{
			width: 100%;
			    background: #c77800;
			    color: #fff;
			    border: 1px solid #353535;
		}
		.aa{
			width: 100%;
			    display: flex;
			    justify-content: center;
			    flex-direction: column;
			    align-items: center;
			    padding: 13px 10px;
			    margin-top: 10px;
			    // background: #c77800;
			    color: #fff;
			background-color: #353535;
		}
	}
</style>
